<template>
    <div class="handBook">
        <h2 class="title">宝可梦图鉴</h2>
        <div class="filter-box">
            <div class="area">
                <span class="text">登场地区</span>
                <ul class="area-list">
                    <template v-for="(item, index) in areaList" :key="item">
                        <el-divider direction="vertical" v-if="index !== 0" />
                        <li class="area-item" :class="filter.area === item ? 'hover' : ''" @click="filter.area = item">{{
                            item
                        }}</li>
                    </template>
                </ul>
            </div>
            <div class="area">
                <span class="text attribute">属性</span>
                <ul class="area-list">
                    <template v-for="(item, index) in attributeList" :key="item">
                        <el-divider direction="vertical" v-if="index !== 0" />
                        <li class="area-item attribute" :class="filter.attribute === item ? 'hover' : ''"
                            @click="filter.attribute = item">{{ item }}</li>
                    </template>
                </ul>
            </div>
            <div class="sort">

            </div>
        </div>
        <div class="pokemon-box" v-loading="loading">
            <div class="pokemon-card" v-for="item in pokemonList" :key="item.id" @click="showDialog(item)">
                <img :src="baseUrl + item.image">
                <div class="card-text">
                    <h3 class="id">编号{{ item.id }}</h3>
                    <h2 class="name">{{ item.name }}</h2>
                    <div class="attributes">
                        <div class="attr" :class="getAttrClass(attr)" v-for="attr in JSON.parse(item.attribute)"
                            :key="attr">{{ attr }}
                        </div>
                    </div>
                    <p>{{ item.outline }}</p>
                </div>
            </div>
        </div>
        <el-empty description="暂无数据" v-if="!pokemonList.length && !loading"/>
        <div class="paging-box" v-show="pokemonList.length">
            <paging :totalPages="pageInfo.totalPage" :pagingMethod="getdata" />
        </div>
        <detail :visible="DialogVisible" @onback="closeDetail" :info="hoverPokemon"/>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { getPage } from '@/api/pokemon'
import Paging from '@/components/Paging.vue'
import { ElMessage } from 'element-plus'
import detail from './detail.vue'
const DialogVisible = ref(false)
const loading = ref(false)
const areaList = ['全部', '关都地区', '城都地区', '丰缘地区', '神奥地区', '合众地区', '卡洛斯地区', '阿罗拉地区', '伽勒尔地区', '洗翠地区', '帕迪亚地区'];
const attributeList = ['全部', '一般', '火', '水', '草', '电', '冰', '格斗', '毒', '地面', '飞行', '超能力', '虫', '岩石', '幽灵', '龙', '恶', '钢', '妖精'];
const attrClass = ['allAttr', 'normal', 'fire', 'water', 'grass', 'electric', 'ice', 'combat', 'poison ', 'ground', 'fly', 'super', 'insect', 'rock', 'ghost', 'dragon ', 'evil', 'steel', 'spirit']

type Pokemon = {
    id:number;
    name: string;
    image:string;
    outline:string;
};

const pokemonList = ref([] as Pokemon[]);
const baseUrl = window.config.baseUrl;
// 选中的地区
const filter = reactive({
    area: '全部',
    attribute: '全部'
})
// 选中的宝可梦
const hoverPokemon = ref({})
const pageInfo = reactive({
    limit: 8,
    page: 1,
    total: 0,
    totalPage: 0
})
// 获取属性class
const getAttrClass = (attr: string) => {
    return attrClass[attributeList.indexOf(attr)]
}

// 获取数据
const getdata = (page?: number) => {
    if (page) pageInfo.page = page;
    loading.value = true
    const params = {
        limit: pageInfo.limit,
        page: pageInfo.page,
        area: filter.area === '全部' ? null : filter.area,
        attribute: filter.attribute === '全部' ? null : filter.attribute
    }
    getPage(params).then((res: any) => {
        if (res.code !== 200) return ElMessage.error('获取数据失败');
        const { data } = res;
        pokemonList.value = data.data;
        pageInfo.total = data.total;
        pageInfo.totalPage = data.totalPage;
    }).finally(()=>{
        loading.value = false
    })
}
watch(filter, (newVal, oldVal) => {
    pageInfo.page = 1;
    getdata();
}, { deep: true })
getdata();

// 开启弹窗回调
const showDialog = (item :any)=>{
    hoverPokemon.value = item;
    DialogVisible.value = true
}
// 关闭弹窗回调
const closeDetail = () =>{
    hoverPokemon.value = {}
    DialogVisible.value = false
}
</script>

<style scoped lang="scss">
.handBook {
    color: #333;
    padding: 0 60px;
    height: 850px;
    position: relative;
    .title {
        margin: 20px 0;
        font-size: 30px;
        color: rgb(255, 203, 0);
        text-shadow: 0px 2px 2px rgb(43, 107, 182),
    }

    .area {
        display: flex;
        align-items: center;
        margin-top: 25px;

        .text {
            font-weight: bold;
            margin-right: 40px;
            font-size: 22px;

            &.attribute {
                margin-right: 0px;
                letter-spacing: 42px;
            }
        }

        .area-list {
            display: flex;
            align-items: center;

            .area-item {
                cursor: pointer;
                height: 25px;
                text-align: center;
                line-height: 25px;
                padding: 4px 15px;

                &.attribute.hover {
                    background-color: rgb(40, 89, 161);
                }

                &.hover {
                    border-radius: 12px;
                    background-color: rgb(255, 204, 0);
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }

    .pokemon-box {
        padding-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .pokemon-card {
            width: 400px;
            height: 250px;
            margin-bottom: 40px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            transition: all .3s;
            cursor: pointer;
            display: flex;
            align-items: center;

            img {
                width: 200px;
                height: 200px;
            }

            .card-text {
                padding: 0 20px;
                max-width: 165px;

                .name {
                    text-align: center;
                    font-size: 28px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }

                .id {
                    text-align: center;
                }

                p {
                    text-indent: 2em;
                    line-height: 20px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden; //溢出内容隐藏
                    text-overflow: ellipsis; //文本溢出部分用省略号表示
                    display: -webkit-box; //特别显示模式
                    -webkit-line-clamp: 3; //行数
                    line-clamp: 3;
                    -webkit-box-orient: vertical; //盒子中内容竖直排列
                }
            }

            &:hover {
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
                transform: translateY(-5px);
            }
        }
    }
    .paging-box{
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    .empty{
        font-size: 36px;
        margin: 220px auto;
        text-align: center;
    }
}
</style>